<template>
  <div>
    <div style="margin-top: 15px;">
      <el-input v-model="searchVal" placeholder="请输入状态码/错误信息" class="input-with-select" @keyup.native="goSearch" @keydown.native.enter="search">
        <el-button slot="append" icon="el-icon-search" />
      </el-input>
      <el-table
        :data="errorStatusList"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="100"
          label="序号"
        />
        <el-table-column
          prop="code"
          label="状态码"
          width="180"
        />
        <el-table-column
          prop="msg"
          label="错误信息"
        />
      </el-table>
    </div>
  </div></template>

<script>
import { getErrorStatusList } from '@/api/api'

export default {
  name: 'Index',
  data() {
    return {
      errorStatusList: [],
      oldStatusList: [],
      status: true,
      searchVal: ''
    }
  },
  mounted() {
    this.getErrorStatusList()
  },
  methods: {
    search() {
      this.errorStatusList = []
      // 判断展示列表，如果输入了就展示没输入就不展示
      if (this.searchVal.length === 0) {
        this.errorStatusList = JSON.parse(JSON.stringify(this.oldStatusList))
        return
      }
      this.oldStatusList.forEach((item) => {
        // id、name、time去分别跟输入的值进行比较
        if (item.code.indexOf(this.searchVal) !== -1 || item.msg.indexOf(this.searchVal) !== -1) {
          // 将当前匹配到的值添加到list数组中
          this.errorStatusList.push(item)
        }
      })
    },
    // 节流函数
    goSearch() {
      // 保持this的指向始终指向vue实例
      const that = this
      if (!that.status) {
        return
      }
      that.status = false
      setTimeout(function() {
        that.search() // 调用写好的方法
        that.status = true
      }, 1000)
    },
    getErrorStatusList() {
      getErrorStatusList().then(res => {
        const { data } = res
        if (data.code === 0) {
          this.errorStatusList = JSON.parse(JSON.stringify(data.data))
          this.oldStatusList = JSON.parse(JSON.stringify(data.data))
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
